<template>
  <div class="app">
    <el-card>
      <div class="box">
        <div class="left">
          <el-form
            :inline="true"
            :model="simpleform"
            :rules="rules"
            ref="dynamicValidateForm"
          >
          <!-- 改动了标签管理模块的标题 -->
            <el-form-item
              label="标签名称"
              style="margin-right: 50px"
              prop="tagName"
            >
              <el-input v-model="simpleform.tagName"></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="state">
              <el-select v-model="simpleform.state" placeholder="活动区域">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button size="small" @click="delfn">清除</el-button>
              <el-button size="small" type="primary" @click="searchlist"
                >搜索</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <div>
          <el-button type="success" icon="el-icon-edit" @click="updatafn">
            新增目录
          </el-button>
        </div>
      </div>
      <el-alert show-icon type="info" :closable="false"
        >数据一共{{ amount }}条</el-alert
      >
      <el-table :data="tablelist">
        <el-table-column type="index" :index="indexMethod" label="序号">
        </el-table-column>
        <el-table-column prop="subjectName" label="所属学科"> </el-table-column>
        <el-table-column prop="tagName" label="标签名称"> </el-table-column>
        <el-table-column prop="username" label="创建者"> </el-table-column>
        <el-table-column label="创建日期" sortable>
          <template #default="{ row }">
            {{ row.addDate | timeadddate }}
          </template>
        </el-table-column>
        <el-table-column label="状态" sortable>
          <template #default="{ row }">
            {{ row.state | filtersState }}
          </template>
        </el-table-column>
        <el-table-column label="操作" sortable>
          <template #default="{ row }">
            <el-button type="text" @click="nagetion(row.id, row.state)">{{
              row.state === 1 ? "禁用" : "启用"
            }}</el-button>
            <el-button
              type="text"
              :disabled="row.state === 1"
              @click="alter(row.id)"
              >修改</el-button
            >
            <el-button
              type="text"
              :disabled="row.state === 1"
              @click="deltags(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <div class="right">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="pagesizes"
          :page-size="page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="+amount"
        >
        </el-pagination>
      </div>
    </el-card>
    <!-- 弹出对话框 -->
    <DiaLog
      :isShow.sync="isshow"
      :subjectsList="subjectsList"
      @updateAdd="tagsList"
      @getdata="isshowfn"
      ref="dialogfDm"
    ></DiaLog>
  </div>
</template>

<script>
import { list, changeState, remove, detail } from '@/api/hmmm/tags'
import dayjs from 'dayjs'
import { status } from '@/api/hmmm/constants'
import DiaLog from '@/components/tags/dialog'
export default {
  components: {
    DiaLog
  },
  data () {
    return {
      tablelist: [],
      amount: 0,
      pagesizes: [10, 15, 20, 25, 30],
      currentPage: 1,
      page: 10,
      isshow: false,
      subjectsList: [],
      simpleform: {
        tagName: '',
        state: ''
      },
      rules: {
        tagName: [
          {
            required: true,
            message: '此项不能为空',
            trigger: ['blur', 'change']
          }
        ],
        state: [
          { required: true, message: '还有一个', trgger: ['blur', 'change'] }
        ]
      }
    }
  },
  created () {
    this.tagsList()
  },
  //   处理时间
  filters: {
    timeadddate (value) {
      return dayjs(value).format('YYYY-MM-DD')
    },
    // 处理状态
    filtersState (numb) {
      const obj = status.find((item) => item.value === numb)
      return obj.label
    }
  },
  methods: {
    //   获取数据渲染页面
    async tagsList () {
      const { data } = await list({
        page: this.currentPage,
        pagesize: this.page
      })
      const { counts, items } = data
      this.amount = counts
      this.tablelist = items
      //   console.log(typeof counts, 123)
    },
    // 每页的条数
    handleSizeChange (val) {
      //   console.log(`每页 ${val} 条`)
      this.page = val
      this.tagsList()
    },
    // 当前第几页
    handleCurrentChange (val) {
      //   console.log(`当前页: ${val}`)
      this.currentPage = val
      this.tagsList()
    },
    // 序号
    indexMethod (index) {
      return index + 1 + this.page * (this.currentPage - 1)
    },
    // 获取所有的学科
    async isshowfn () {
      const {
        data: { items }
      } = await list({ page: 1, pagesize: 999999 })
      this.subjectsList = items
      //   console.log(items, 345)
    },
    // 清空表单
    delfn () {
      this.$refs.dynamicValidateForm.resetFields()
      this.tagsList()
    },
    // 标签状态, 启用或禁用
    async nagetion (id, numb) {
      const state = numb === 1 ? 0 : 1
      await changeState({ id, state })
      this.tagsList()
      //   console.log(id, state)
    },
    // 删除操作
    deltags (id) {
      this.$confirm('此操作将无法修复,确删除吗?', '提示')
        .then(async () => {
          await remove({ id })
          this.$message.success('删除成功')
          this.tagsList()
        })
        .catch(() => {
          console.log('取消')
        })
    },
    // 新增目录打开弹窗,改标题
    updatafn () {
      this.isshow = true
      this.$refs.dialogfDm.title = '新增目录'
    },
    // 根据id获取数据回显修改,改标题
    async alter (id) {
      this.$refs.dialogfDm.title = '修改目录'
      this.isshow = true
      const { data } = await detail({ id })
      this.$refs.dialogfDm.form.subjectID = data.subjectID
      this.$refs.dialogfDm.form.tagName = data.tagName
    },
    // 所搜内容
    searchlist () {
      this.$refs.dynamicValidateForm.validate(async (val) => {
        if (!val) return
        const {
          data: { items }
        } = await list({ ...this.simpleform })
        // console.log(items.length)
        if (items.length === 0) {
          this.$message.success('没有找到')
          //   this.tagsList()
          return
        }
        this.tablelist = items
        // this.tagsList()
      })
      //   console.log('被点了')
    }
  }
}
</script>

<style lang="scss" scoped>
// ::v-deep{
//     .box-card {
//     width: 480px;
//     // margin: 5px  10px;
//   }
// }
.box {
  display: flex;
  justify-content: space-between;
  .left {
    display: flex;
  }
}
.right {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
</style>
